<template>
  <div class="configInfo">
    <h3>
      {{$t('configLazyLoad.channel.enterpriseTip103')}}
    </h3>
   <el-form class="form" ref="ruleForm" :rules="rules" :model="form"  label-position="left" label-width="160px">
      <!-- <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip9')" prop="name">
        <el-input v-model.trim="form.name"></el-input>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip10')" prop="agentid">
        <el-input v-model.trim="form.agentid" :disabled="showAddOrEditType === 'edit'"></el-input>
      </el-form-item> -->
      <!-- <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip11')" prop="secret">
        <el-input v-model.trim="form.secret" :disabled="showAddOrEditType === 'edit'"></el-input>
      </el-form-item> -->
      <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip12')" prop="corpid">
        <el-input v-model.trim="form.corpid" :disabled="true"></el-input>
        <question-tooltip
          class="wechatPlatformTooltip"
          :direction="'bottom'"
          :tipContent="$t('configLazyLoad.channel.enterpriseTip13')">
        </question-tooltip>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip109')" prop="name">
        <el-input size="mini" v-model.trim="form.name" ></el-input>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip110')" prop="agentid">
        <el-input size="mini" v-model.trim="form.agentid" :disabled="true"></el-input>
        <question-tooltip
          class="wechatPlatformTooltip"
          :direction="'bottom'"
          :tipContent="$t('configLazyLoad.channel.enterpriseTip104')">
        </question-tooltip>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip111')" prop="corpName">
        <el-input size="mini" v-model.trim="form.corpName" :disabled="showAddOrEditType === 'edit'"></el-input>
        <question-tooltip
          class="wechatPlatformTooltip"
          :direction="'bottom'"
          :tipContent="$t('configLazyLoad.channel.enterpriseTip105')">
        </question-tooltip>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip112')" prop="logoUrl">
        <!-- <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
               <el-row class="config" v-if="systemMsgLogoUi.show">
                <el-col :span="8">&nbsp;</el-col>
                <el-col :span="16">
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="systemMsgLogoUi.percent" :status="systemMsgLogoUi.type" v-if="systemMsgLogoUi.show"></el-progress>
                </el-col>
             </el-row>
               <!--  <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.systemAvater')}}</el-col>
                <el-col :span="16">
                  <div class="wrap_logo">
                    <img v-show="form.logoUrl" :src="form.logoUrl" alt="" class="logo fl">
                    <p class="btn fl" id="uploadlogoUrl">{{$t('configLazyLoad.channel.uplopadImage')}}</p>
                    <p class="btn fl del_upload_file" v-show="form.logoUrl" @click="deleteUploadFile('uploadlogoUrl')">{{$t('public.delete')}}</p>
                  </div>
                  <span class="desc">{{$t('configLazyLoad.channel.webStyleTip7')}}</span>
                </el-col>
              </el-row> -->
                  <div class="avatar-uploader" >
                    <div class="avatar-uploader-box" id="uploadlogoUrl">
                      <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
                      <i v-else  class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                    
                  </div>
                  <!-- <div class="wrap_logo">
                     
                    <img v-show="form.logoUrl" :src="form.logoUrl" alt="" class="logo fl">
                    <p class="btn fl" id="uploadlogoUrl">{{$t('configLazyLoad.channel.uplopadImage')}}</p>
                    <p class="btn fl del_upload_file" v-show="form.logoUrl" @click="deleteUploadFile('logoUrl')">{{$t('public.delete')}}</p> 
                  </div>-->
                  <!-- <span class="desc">{{$t('configLazyLoad.channel.webStyleTip3')}}</span>  -->
                  
        <question-tooltip
          class="wechatPlatformTooltip"
          :direction="'bottom'"
          :tipContent="$t('configLazyLoad.channel.enterpriseTip106')">
        </question-tooltip>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.enterpriseTip113')" >
         <el-input size="mini" type="textarea" v-model="form.description"></el-input>
        <question-tooltip
          class="wechatPlatformTooltip"
          :direction="'bottom'"
          :tipContent="$t('configLazyLoad.channel.enterpriseTip107')">
        </question-tooltip>
      </el-form-item>
    </el-form>
    <h5 >
      {{$t('configLazyLoad.channel.enterpriseTip117')}}
    </h5>
    <div  class="btn">
       <el-button class="primary_btn" style="margin-right: 20px" @click="prevStep()">{{$t('public.prevStep')}}</el-button>
      <el-button type="primary" class="primary_btn" @click="nextStep()">{{$t('public.nextStep')}}</el-button>
    </div>
  </div>
</template>
<script>
// import { randomWord, deepClone } from '@/utils/m7Utils'
import questionTooltip from '@/components/ui-modules/questionToolTip/QuestionToolTip.vue'
import { qiniu7moorImDomain, uploadTo7moorlogoImgDomain } from '@utils/qiniuUtils'
import * as uuid from 'uuid'
import {getCurrentDate, deepClone, filterXSS} from '@/utils/m7Utils'
import bus from '@/store/eventBus'
export default {
  name: 'enterpriseConfigInfo',
  data () {
    return {
      uploadUrl: qiniu7moorImDomain || '',
      m7uploaders:[],
      form: {},
      systemMsgLogoUi: {       //  系统消息头像上传进度条
          show: false,
          percent: 0,
          type: 'success',
          fileName: '',
          disabled: false
        },
      rules: {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        agentid: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        corpName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        logoUrl: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        secret: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        corpid: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
      },
    }
  },
  props: {
    configData: {
      type: Object,
      default:  () => {
        return {}
      }
    },
    showAddOrEditType: {
      type: String,
      default: () => {
        return 'add'
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    
  },
  components: {
    questionTooltip
  },
 created() {
   this.form = this.formData
   this.$nextTick(() => {
     this.initUploadImageFile()
   })
   this.$store.dispatch('updateWxEnterpriseConfig',this.form).then(req => {
         
            })
 },
  methods: {
    prevStep () {
      bus.$emit('enterpriseCancel')
    },
   
    nextStep () {
      this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.$store.dispatch('updateWxEnterpriseConfig',this.form).then(req => {
         
            })
            this.$emit('nextStep', "four")
          }
      })
      
    },
     handleAvatarSuccess(res, file) {
        this.form.logoUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        console.log(file);
        const isJPG = file.type == 'image/jpeg'||file.type == 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
        }
        return isJPG && isLt2M;
      },
       // 上传图片初始化的事件
      initUploadImageFile () {
        let account = this.$store.state.session.user.account
        let self = this
        let fileAdded = function (up, files) {}
       
        let beforeUploadSysLogo = function (up, file) {
          self.systemMsgLogoUi.show = true
          self.systemMsgLogoUi.percent = 0
        }
        let upProgressSysLogo = function (up, file) {
          self.systemMsgLogoUi.percent = file.percent
        }
        let upCompleteSysLogo = function (up, file) {
          self.systemMsgLogoUi.show = false
        }
      
        let systemLogouploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey )
          if (!sourceLink) {
            return
          }
          self.form.logoUrl = sourceLink
          self.$message.success('上传成功')
        }
        let error = function (up, err, errTip) {
          if (errTip) {
            self.$message.error(errTip)
          }
          console.log('uploadError ' + errTip)
        }
        let key = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let key = account + '/km/' + date + '/' + time + '/' + uuid.v1() + file.name
          return key
        }
        let filters = {
          mime_types: [
            {title: 'Image files', extensions: 'jpg,png,jpeg'}
          ]
        }

        this.m7uploaders.push(
          uploadTo7moorlogoImgDomain(this.$store.state.session.user._id, 'uploadlogoUrl', filters, fileAdded, beforeUploadSysLogo, upProgressSysLogo, upCompleteSysLogo, systemLogouploaded, error, key)
        )
     
      },
      //      删除上传的头像
      deleteUploadFile (str) {
       
        this.$set(this.form, 'logoUrl', '')
         
      },
  
  },
  beforeDestroy () {
      this.m7uploaders.forEach(uploader => {
        uploader &&
        uploader.destroy &&
        uploader.destroy()
      })
    }
}
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .configInfo
    margin 30px auto
    width 540px
    h3
      text-align left
      margin-bottom 10px
      font-weight bold
    h5
      text-align left
      margin-bottom 20px
      font-size 12px
      color #459AE9
    .btn
      margin-top 20px  
    .form
      margin-top 30px
      width 500px
    .wechatPlatformTooltip
      position absolute
      right -26px 
      top 50%
      transform: translateY(-20px)
    .avatar-uploader 
      text-align left  
      .el-upload
        position relative
        border 1px dashed #d9d9d9
        border-radius 6px
        cursor pointer
        overflow hidden
    
    .btn
      margin 6px 0 0 0
      min-width 90px
      height 24px
      line-height 24px
      text-align center
      display inline-block
      cursor pointer
      color $c-main
    .del_upload_file
      color $c-pink
      min-width 40px
      margin-left 10px
    .wrap_logo
      height 36px
      margin-bottom 6px
    .logo
      max-width 36px
      max-height 36px
      margin-right 20px
    .desc
      color $c-prompt
    .fl
      height 30px
      background $c-border2
      line-height 30px
      padding 0 6px
      border-radius 4px
      position relative
    .fl:before
      display block
      content ""
      width 0
      height 0
      border-right 5px solid $c-border2
      border-top 4px solid transparent
      border-bottom 4px solid transparent
      position absolute
      left -5px
      top 10px  
    
     .el-upload hover
       border-color #409EFF
    .avatar-uploader-icon 
      border 1px dashed #d9d9d9
      font-size 28px
      color #8c939d
      width 78px
      height 78px
      line-height 78px
      text-align center
  
    .avatar 
      width 78px
      height 78px
      display block
    .avatar-uploader-box
      width 78px
      height 78px
    
  
</style>
